<template>
    <view class="rank">
    	<view class="title">
			<image src="/static/campus/rank-bg.png" mode="widthFix"></image>
    		<view class="t-cont">
    			<view>
                    <text class="grade">{{activityInfo.type_name}}</text>
                    <text class="rank-name">{{medalName}}</text>
                </view>
				<view class="time">
					{{timeSlot}}
				</view>
    		</view>
    	</view>
		<view class="ranking">
			<view class="title-rank">
				<text class="stu-name">姓名</text>
				<text class="medal-name">勋章类型</text>
				<text class="stu-class">评分</text>
				<text class="stu-score">星级</text>
			</view>
			<view class="list">
				<view class="st-item" v-for="(item, i) in activityUserRanking" :key="i">
					<text class="stu-name">{{item.name}}</text>
					<text class="medal-name">{{item.medal_name}}</text>
					<text class="stu-class">{{item.evaluation || '-'}}分</text>
					<text class="stu-score">{{item.score_teacher || 0}}星</text>
				</view>
			</view>
		</view>
    </view>
</template>
<script>
export default {
    data() {
        return{
            timeSlot: '', // 活动时间段
            activityId: '',
            activityInfo: {}, // 活动信息
            medalName: '', // 勋章名字
			activityUserRanking: [], // 排行信息
        }
    },
	onLoad(options){
        this.activityId = options.activityId
        this.getActivityParInfo()
		this.getActivityUserRanking()
	},
	methods: {
        // 获取活动详情
		getActivityParInfo(){
			this.api.get('activity/getActivityInfo', {
				activityId: this.activityId
			}).then(res=>{
				if(res.data.state != 'ok') return
				this.activityInfo = res.data.activity
                // 活动时间段
                let startDate = this.activityInfo.update_time.split(' ')[0],
                endDate = this.activityInfo.end_date.split(' ')[0]
                this.timeSlot = `${startDate.split('-').join('.')}-${endDate.split('-').join('.')}`
			
			})
		},
		// 查询某个活动的学生排名
		getActivityUserRanking(){
			this.api.get('activity/getActivityUserRanking', {
				activityId: this.activityId,
				isAdmin: false
			}).then(res => {
				if(res.data.state == 'ok'){
					this.activityUserRanking = res.data.activityUserRanking;
                    this.medalName = this.activityUserRanking[0] ? this.activityUserRanking[0].medal_name : ''
				}
			})
		},
		seeDetails(id){
			uni.navigateTo({
				url: '/pages/student/user-details?id=' + id
			})
		}
	}
}
</script>
<style lang="less" scoped>
    .title{
        position: relative;
        image{
            width: 100%;
        }
        font-size: 0;
        
    }
    .t-cont{
        position: absolute;
        top: 100rpx;
        left: 88rpx;
        color: #fff;
        .time{
            margin-top: 31rpx;
            line-height: 40rpx;
            font-size: 28rpx;
        }
        .grade{
            display: inline-block;
			width: 92rpx;
			height: 50rpx;
			text-align: center;
			font-size: 32rpx;
			color: #B12424;
			font-weight: bold;
			line-height: 50rpx;
			background: #fff;
			border-radius: 10rpx 0 10rpx 10rpx;
        }
        
		.rank-name{
            display: inline-block;
			font-size: 48rpx;
			margin-left: 7rpx;
			color: #fff;
			font-weight: bold;
			line-height: 48rpx;
            vertical-align: top;
		}
    }
    .tab{
        margin-top: 38rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 132rpx;
        .text{
            display: inline-block;
            height: 40rpx;
            line-height: 40rpx;
        }
        .active{
            color: #28C2CD;
            position: relative;
            .tag{
                position: absolute;
                bottom: -10rpx;
                left: calc(50% - 21rpx);
                height: 6rpx;
                width: 42rpx;
                border-radius: 3rpx;
                background-color: #28C2CD;
            }
        }
        
    }
    .ranking{
        margin-top: 32rpx;
        padding: 0 32rpx;
        .stu-name{
            width: 148rpx;
        }
        .medal-name{
            width: 140rpx
        }
        .stu-class{
            width: 120rpx;
        }
        .stu-score{
            width: 60rpx;
        }
    }
    .title-rank{
        display: flex;
        justify-content: space-between;
        height: 80rpx;
        line-height: 80rpx;
        background-color: #F9F9F9;
        margin-bottom: 20rpx;
        padding: 0 54rpx;
        .stu-name{
            
            box-sizing: border-box;
        }
    }
    .list{
        margin-top: 54rpx;
    }
    .st-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 54rpx;
        margin-bottom: 92rpx;
    }
</style>
